<template>
  <el-popover
    :show-after="500"
    placement="left-start"
    title="辅料信息"
    width="550"
    @show="open"
  >
    <template #reference>
      <div class="btn-style mb-[2px]">含有辅料</div>
    </template>
    <div class="dialog-content1">
      <vxe-grid ref="tableRef" v-bind="tableOptionsSupplier"></vxe-grid>
    </div>
  </el-popover>
</template>

<script setup lang="jsx">
import { getAccessorDetail } from "./api.js";
import { reactive, toRefs } from "vue";

const props = defineProps({
  row: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { row } = toRefs(props);

// 打开弹窗
const open = async () => {
  getSupplierHistory({
    sku_id: row.value.id,
  });
};

const getSupplierHistory = (data) => {
  tableOptionsSupplier.data = [];
  tableOptionsSupplier.loading = true;
  getAccessorDetail(data)
    .then((res) => {
      tableOptionsSupplier.data = res?.data || [];
    })
    .finally(() => {
      tableOptionsSupplier.loading = false;
    });
};

const tableOptionsSupplier = reactive({
  round: true,
  height: "350",
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [],
  columns: [
    { title: "辅料SKU", field: "sku" },
    { title: "辅料中文名", field: "sku_cn_title" },
    { title: "辅料用途", field: "accessories_use" },
    {
      title: "主/辅比",
      field: "create_user_text",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {row.quantity_main}:{row.quantity_auxiliary}
            </div>
          );
        },
      },
    },
  ],
});
</script>
<style></style>
